import { PureComponent, Fragment } from "react"
import { InputItem } from "antd-mobile"
import { isNull, filterTemplate, calcField } from "../../utils/helper"
interface Props {
	field: string[],
	formData: object,
	label?: string,
	align?: any,
	label_width?: string | number,
	tips?: string,
	label_text_align?: any,
	label_text_color?: string,
	mapping?: object,
	text_color?: string,
	show_label?:number|string
}
interface State {

}
export default class MiText extends PureComponent<Props, State> {

	public readonly state: Readonly<State> = {

	}

	
	public render() {
		let { field, formData, label, align = "left", label_width = 5, tips, label_text_align = "left", label_text_color, mapping, text_color,show_label ,label_style} = this.props;
		let labelClass = "am-input-label am-input-label-" + label_width;
		let value = formData[field[0]];
		if (!isNull(mapping) && mapping instanceof Object) {
			if (!isNull(mapping[value])) {
				value = mapping[value]
			}
		}
		text_color = filterTemplate(text_color, formData);
		return (
			<div>
				<div className="am-list-item mi-text">
					<div className="am-list-line">
					{
						show_label!=0&&	<div className={labelClass}  style={{ textAlign: label_text_align, color: label_text_color,...label_style }}>
						<span className="am-form-label"  style={{ textAlign: label_text_align, color: label_text_color,...label_style }}>{label}</span>
					</div>
					}
						<div className="am-input-control" style={{ textAlign: align, color: text_color }}>
							<span dangerouslySetInnerHTML={{ __html: value }}></span>
						</div>
					</div>
				</div>
				{tips && <p className="tipsStyle">{tips}</p>}
			</div>
		)
	}
}